<template>
  <div class="health-info-section">
    <div class="section-header">
      <span class="section-title">健康资讯</span>
      <span class="more-link" @click="goToList">更多</span>
    </div>
    <div class="info-list">
      <div v-for="item in infoList" :key="item.id" class="info-item" @click="goToDetail(item.id)">
        <div class="info-content">
          <div class="info-title">{{ item.content }}</div>
          <div class="info-tags">
            <span class="tag">#{{ item.categoryName }}</span>
          </div>
          <div class="info-stats">
            <span class="like-count">
              <van-icon name="like-o" /> {{ item.likeCnt }}
            </span>
            <span class="view-count">
              <van-icon name="eye-o" /> {{ item.viewCnt }}
            </span>
          </div>
        </div>
        <div class="info-image" v-if="item.imageUrl">
          <img :src="item.imageUrl" alt="资讯图片" />
        </div>
        <div v-else class="info-image info-default-image">
          <div class="info-image-placeholder"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { axiosrnewmedical } from '@/http/axiosRead';

// 定义文章信息接口
interface HealthArticle {
  id: number;
  catId: number;
  categoryName: string;
  title: string;
  content?: string;
  authorId?: number;
  authorName?: string;
  likeCnt: number;
  viewCnt: number;
  status?: string;
  createdAt?: string;
  tags?: string;
  imageUrl?: string;
}

const router = useRouter();
const infoList = ref<HealthArticle[]>([]);

// 获取首页资讯列表（只显示2条）
const fetchInfoList = async () => {
  try {
    const res = await axiosrnewmedical.get('/Consult/questions', {
      params: {
        pageIndex: 1,
        pageSize: 2
      }
    });
    
    if (res.data && res.data.code === 200) {
      infoList.value = res.data.data.items || [];
    } else {
      // 如果接口失败，使用模拟数据
      infoList.value = [
        {
          id: 1,
          catId: 1,
          categoryName: '健康养生',
          title: '',
          content: '世界糖尿病日，应该注意什么来调节？',
          authorName: '张医生',
          likeCnt: 520,
          viewCnt: 2000,
          createdAt: '2020-01-01',
          tags: '健康养生'
        },
        {
          id: 2,
          catId: 1,
          categoryName: '健康养生',
          title: '',
          content: '世界糖尿病日，应该注意什么来调节？',
          authorName: '李医生',
          likeCnt: 520,
          viewCnt: 2000,
          createdAt: '2020-01-01',
          tags: '健康养生'
        }
      ];
    }
  } catch (error) {
    console.error('获取健康资讯失败:', error);
    // 使用模拟数据
    infoList.value = [
      {
        id: 1,
        catId: 1,
        categoryName: '健康养生',
        title: '',
        content: '世界糖尿病日，应该注意什么来调节？',
        authorName: '张医生',
        likeCnt: 520,
        viewCnt: 2000,
        createdAt: '2020-01-01',
        tags: '健康养生'
      },
      {
        id: 2,
        catId: 1,
        categoryName: '健康养生',
        title: '',
        content: '世界糖尿病日，应该注意什么来调节？',
        authorName: '李医生',
        likeCnt: 520,
        viewCnt: 2000,
        createdAt: '2020-01-01',
        tags: '健康养生'
      }
    ];
  }
};

// 跳转到资讯详情
const goToDetail = (id: number) => {
  router.push(`/health-info/detail/${id}`);
};

// 跳转到资讯列表
const goToList = () => {
  router.push('/health-info/list');
};

onMounted(fetchInfoList);
</script>

<style scoped>
.health-info-section {
  background-color: #f8f9fe;
  border-radius: 8px;
  padding: 16px;
  margin: 12px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.more-link {
  color: #999;
  font-size: 14px;
}

.info-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.info-item {
  display: flex;
  background: #fff;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.info-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.info-title {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 8px;
  line-height: 1.4;
  color: #333;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.info-tags {
  margin-bottom: 8px;
}

.tag {
  font-size: 12px;
  color: #338aff;
}

.info-stats {
  display: flex;
  gap: 16px;
  color: #999;
  font-size: 12px;
}

.info-image {
  width: 80px;
  height: 80px;
  border-radius: 4px;
  overflow: hidden;
  margin-left: 12px;
  background-color: #f0f2f5;
}

.info-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.info-image-placeholder {
  width: 100%;
  height: 100%;
  background-color: #f0f2f5;
}
</style> 